// 地图
function buildChart1() {
  var myChart = echarts.init(document.getElementById('map'));
  var chinaGeoCoordMap = {
    "福建": [119.4543, 25.9222],
    "泉州": [118.4543, 25.0222],
    '大庆': [126.9688, 45.868],
    '内蒙古': [110.3467, 41.4899],
    "吉林": [125.8154, 44.2584],
    '北京': [116.4551, 40.2539],
    "辽宁": [123.1238, 42.1216],
    "河北": [114.4995, 38.1006],
    "天津": [117.4219, 39.4189],
    "山西": [112.3352, 37.9413],
    "陕西": [109.1162, 34.2004],
    "甘肃": [103.5901, 36.3043],
    "宁夏": [106.3586, 38.1775],
    "青海": [101.4038, 36.8207],
    "新疆": [87.9236, 43.5883],
    "西藏": [91.11, 29.97],
    "四川": [103.9526, 30.7617],
    "重庆": [108.384366, 30.439702],
    "山东": [117.1582, 36.8701],
    "河南": [113.4668, 34.6234],
    "江苏": [118.8062, 31.9208],
    "安徽": [117.29, 32.0581],
    "湖北": [114.3896, 30.6628],
    "浙江": [119.5313, 29.8773],
    '黑龙江': [127.9688, 45.368],
    "江西": [116.0046, 28.6633],
    "湖南": [113.0823, 28.2568],
    "贵州": [106.6992, 26.7682],
    "云南": [102.9199, 25.4663],
    "广东": [113.12244, 23.009505],
    "广西": [108.479, 23.1152],
    "海南": [110.3893, 19.8516],
    '上海': [121.4648, 31.2891]
  };
  var chinaDatas = [
    [{
      name: '黑龙江',
      value: 880
    }],
    [{
      name: '内蒙古',
      value: 12
    }],
    [{
      name: '吉林',
      value: 389
    }],
    [{
      name: '辽宁',
      value: 806
    }],
    [{
      name: '河北',
      value: 1088
    }],
    [{
      name: '北京',
      value: 2083
    }],
    [{
      name: '天津',
      value: 1071
    }],
    [{
      name: '山西',
      value: 603
    }],
    [{
      name: '陕西',
      value: 756
    }],
    [{
      name: '宁夏',
      value: 170
    }],
    [{
      name: '云南',
      value: 201
    }],
    [{
      name: '四川',
      value: 1015
    }],
    [{
      name: '重庆',
      value: 580
    }],
    [{
      name: '山东',
      value: 2077
    }],
    [{
      name: '河南',
      value: 2075
    }],
    [{
      name: '江苏',
      value: 1088
    }],
    [{
      name: '安徽',
      value: 573
    }],
    [{
      name: '湖北',
      value: 705
    }],
    [{
      name: '浙江',
      value: 1082
    }],
    [{
      name: '福建',
      value: 967
    }],
    [{
      name: '江西',
      value: 710
    }],
    [{
      name: '湖南',
      value: 775
    }],
    [{
      name: '广东',
      value: 1078
    }],
    [{
      name: '海南',
      value: 295
    }],
    [{
      name: '新疆',
      value: 50
    }],
    [{
      name: '上海',
      value: 1891
    }]
  ];

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];

      var toCoord = [113.4668, 34.6234];//目的点
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  var series = [];
  [
    ['泉州', chinaDatas]
  ].forEach(function (item, i) {
    console.log(item)
    series.push({
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 5, //图标大小
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: .3 //尾迹线条曲直度
            }
          },
          data: convertData(item[1])
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: { //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: 'stroke', //波纹绘制方式 stroke, fill
            scale: 4 //波纹圆环最大限制，值越大波纹越大
          },
          label: {
            normal: {
              show: true,
              position: 'right', //显示位置
              offset: [5, 0], //偏移设置
              formatter: function (params) { //圆环显示文字
                return params.data.name;
              },
              fontSize: 13
            },
            emphasis: {
              show: true
            }
          },
          symbol: 'circle',
          symbolSize: 4,
          itemStyle: {
            normal: {
              show: false,
              color: '#f00'
            }
          },
          data: item[1].map(function (dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
            };
          }),
        },
        //被攻击点

    );
  });

  option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function (params, ticket, callback) {
        //根据业务自己拓展要显示的内容
        var res = "";
        var name = params.name;
        var value = params.value[params.seriesIndex + 1];
        res = "<span style='color:#fff;'>" + name + "</span><br/>人数：" + value;
        return res;
      }
    },
    visualMap: { //图例值控制
      min: 0,
      max: 1,
      calculable: true,
      show: false,
      color: ['#fff000', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          color: '#0EBDCD', //地图背景色
          borderColor: '#0030B7', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: '#407FFF' //悬浮背景
        }
      }
    },
    series: series
  };

  myChart.setOption(option);
}

buildChart1()
// 过夜游客分析
let OvernightDate = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
let OvernightNum = [780, 690, 810, 890, 900, 920, 856, 809, 850, 840, 862, 813,]
let OvernightGroup = [400, 420, 356, 409, 350, 340, 362, 413, 380, 390, 310, 390,]
let OvernightDomestic = [1.1, 1.2, 1.4, 2.0, 1.6, 1.4, 1.5, 1.6, 1.7, 1.9, 1.5, 2.1]
let OvernightEntry = [2.1, 2.2, 2.4, 2.2, 2.6, 2.4, 2.5, 2.6, 2.7, 2.9, 2.5, 2.3]

function buildChart2() {
  var myChart = echarts.init(document.getElementById('overnight'));
  option = {
    grid: {
      top: '15%',
      right: '10%',
      left: '10%',
      bottom: '12%'
    },
    tooltip: {
      trigger: 'axis',

      // formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      data: OvernightDate,
      textStyle: {
        color: '#fff'
      },
      data: ['国内游客', '入境游客', '国内环比增长率', '入境环比增长率']
    },
    xAxis: [{
      type: 'category',
      color: '#59588D',
      data: OvernightDate,
      axisPointer: {
        type: 'line'
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        textStyle: {
          fontSize: 12
        },
      },
    }],
    yAxis: [{
      min: 0,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        textStyle: {
          fontSize: 12
        },
      },
    },
      {
        min: 0,
        position: 'right',
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          textStyle: {
            fontSize: 12
          },
          formatter: "{value}%"
        },
      }],
    series: [
      {
        type: 'bar',
        name: "国内游客",
        data: OvernightNum,
        barWidth:12,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(47,230,252)'
            },
              {
                offset: 1,
                color: 'rgb(40,97,214)'
              }], false),
          }
        }
      },
      {
        type: 'bar',
        name: "入境游客",
        data: OvernightGroup,
        barWidth:12,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(98,145,242)'
            },
              {
                offset: 1,
                color: 'rgb(10,41,190)'
              }], false),
          }
        }
      },
      {
        type: 'line',
        name: "国内环比增长率",
        data: OvernightDomestic,
        yAxisIndex: 1,
        smooth: true,
        symbol: 'none',
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(208,99,10,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(208,99,10,0)'
            }, {
              offset: 1,
              color: 'rgba(208,99,10,0)'
            }], false),
          },
        },
        itemStyle: {
          color: "rgba(208,99,10,0.6)"
        },
      },
      {
        type: 'line',
        name: "入境环比增长率",
        data: OvernightEntry,
        yAxisIndex: 1,
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(13,241,222,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(13,241,222,0)'
            }, {
              offset: 1,
              color: 'rgba(13,241,222,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "#407FFF"
        },
      }
    ]
  };
  myChart.setOption(option);
}

buildChart2()
$(".radio-box #yearOvernight").click(function (e) {
  OvernightDate = ['2019', '2018', '2017', '2016', '2015']
  OvernightNum = [23555, 12541, 21541, 12423, 21541,]
  OvernightGroup = [3201, 3102, 3140, 3041, 3111]
  OvernightDomestic = [15, 17, 19, 25, 21]
  OvernightEntry = [26, 27, 29, 25, 23]
  buildChart2()
});
$(".radio-box #monthlyOvernight").click(function (e) {
  OvernightDate = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
  OvernightNum = [780, 690, 810, 890, 900, 920, 856, 809, 850, 840, 862, 813,]
  OvernightGroup = [400, 420, 356, 409, 350, 340, 362, 413, 380, 390, 310, 390,]
  OvernightDomestic = [1.1, 1.2, 1.4, 2.0, 1.6, 1.4, 1.5, 1.6, 1.7, 1.9, 1.5, 2.1]
  OvernightEntry = [2.1, 2.2, 2.4, 2.2, 2.6, 2.4, 2.5, 2.6, 2.7, 2.9, 2.5, 2.3]
  buildChart2()
});

//过夜游客分析
function buildChart6() {
  let countryData = ['河南', '山东', '湖北', '广东', '浙江', '北京', '陕西', '四川', '山西', '河北']
  let num = [1921, 1533, 1477, 1039, 955, 901, 854, 804, 751, 201,]
  var myChart = echarts.init(document.getElementById('overnightSource'));
  option = {
    grid: {
      show: 'true',
      borderWidth: '0',
      height: "90%",
      width: "72%",
      x: "20%",
      y: "2%",
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: "{b0}: {c0}"
      // formatter: function(params) {
      //     var result = '';
      //     params.forEach(function (item) {
      //         result += item.marker + " " + item.seriesName + " : " + item.value +"</br>";
      //     });
      //     return result;
      // }
    },
    xAxis: {
      show: false,                //是否显示x轴
      type: 'value'
    },
    yAxis: [{
      type: 'category',
      inverse: true,               //让y轴数据逆向
      axisLabel: {
        show: true,
        textStyle: {
          color: '#666'       //y轴字体颜色
        },
        formatter: function (value, index) {
          return [
            '{lg|' + (index + 1) + '}' + '{title|' + value + '} '
          ].join('\n');
        },
        //定义富文本标签
        rich: {
          lg: {
            fontWeight: 'bold',
            align: "left",
            fontSize: 12,       //字体默认12
            color: '#fff',
            padding: [0, 5, 0, 0]
          },
          title: {
            color: '#fff',
            fontWeight: 'lighter',
            // borderWidth: 1,
            // borderColor: '#08c'
            // textareaBorderColor: '#08c',
          }
        }
      },
      splitLine: {show: false},   //横向的线
      axisTick: {show: false},    //y轴的端点
      axisLine: {show: false},    //y轴的线
      data: countryData
    },
      {
        show: true,
        inverse: true,
        data: num,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },

      }],
    series: [
      {
        name: '数据内框',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 10,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgb(40,97,214)'
            },
              {
                offset: 1,
                color: 'rgb(47,230,252)'
              }
            ], false),
          }
        },
        /*label: {
            normal: {
                show: true,
                position: 'right',
                color: 'red',
                fontSize: 14,
                formatter:
                function(param) {
                    // return 'xx';
                },
            }
        },*/
        barWidth: 10,
        data: num
      },
      {
        name: '外框',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 10,
            color: 'rgba(255, 255, 255, 0.14)' //rgba设置透明度0.14
          }
        },
        barGap: '-100%',
        z: 0,
        barWidth: 10,
        data: [2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000]
      }
    ]
  };


  myChart.setOption(option);
}

//过夜停留时长

function buildChart5() {
  var myChart = echarts.init(document.getElementById('overnightDuration'));
  option = {
    color:['#0df1de', '#2fe6fc', '#6291f2', '#2861d6', '#0a29be', '#400dc0', '#791c97', '#d0630a', '#f2ec3b', '#25c379'],
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      // orient: 'vertical',
      right: "20%",
      y: 'bottom',
      itemHeight: 10,
      itemWidth: 20,
      textStyle: {
        color: "#FFf"
      },
      data: ['2天以下', '2-4天', '4-7天', '7天以上']
    },
    series: [
      {
        name: '过夜停留时长',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['50%', '46%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          {value: 335, name: '2天以下'},
          {value: 310, name: '2-4天'},
          {value: 234, name: '4-7天'},
          {value: 135, name: '7天以上'}
        ]
      }
    ]
  };

  myChart.setOption(option);
}

buildChart6()
buildChart5()
